<template>
    <div class="pictureorlight">



        <el-col :span="14" class="leftcard">
            <el-row class='leftcardone' :gutter="9">
                <span class="title">图卡切换和移动

                    <el-button class="my_class" type="primary" icon="el-icon-edit"
                        @click="GetCardOne(card_all[activeIndex])">
                        图卡名称修改
                    </el-button>
                    <el-button type="primary" icon="myIcon" @click="GoHomeImage" class="my_class">
                        图卡回仓
                    </el-button>

                    <el-button class="my_class" type="primary" icon="el-icon-refresh"
                        @click="SwitchImage(card_all[activeIndex]['card_slot'])">切换图卡
                    </el-button>

                </span>

                <div class="cardall overflow-x-hidden">

                    <div class="card_list" v-for="(o, indexcard) in card_all" :key="indexcard"
                        :class="{ active: activeIndex === indexcard, cardchoose: clickedIndex === indexcard }"
                        @click="setActive(indexcard)">

                        <!-- <div class="icon_number">{{ o.card_slot}}</div> -->
                        <div class="card_img">
                            <img :src="baseUrl + o['image']" class="image">

                        </div>
                        <div class="card_title">
                            <span>{{ o['card_name'] }}</span>
                        </div>
                        <el-badge :value="o.card_slot" class="badge_item">
                        </el-badge>

                    </div>

                </div>

            </el-row>
            <el-row :gutter="5" class="leftcardtwo">
                <div class="light_list">
                    <!-- <span class="title_name">图卡导轨控制</span> -->
                    <div class="bench-box" v-for="(benchitem, benchkey) in this.benchlist.slice(0, 2)">
                        <!-- <template > -->

                        <span class="move_title">{{ benchitem.name }}(当前位置)</span>
                        <span class="now_position now_position_long">

                            {{ bench_list[benchitem.key]["s"] }}
                            {{ benchitem.Unit }}
                        </span>



                        <div class="post_position">
                            <div class="post_position_input">
                                <span class="setting_title">移动速度：({{ + benchitem.VMin + '-' + benchitem.VMax +
                                    benchitem.Unit + '/s' }})</span>
                                <el-input-number :placeholder="'范围[' + benchitem.VMin + ' -' + benchitem.VMax + ']'
                                    " :controls="false" v-model="bench_list[benchitem.key]['v']" :min="benchitem.VMin"
                                    :max="benchitem.VMax"></el-input-number>
                            </div>
                            <div class="post_position_input">
                                <span class="setting_title">移动位置：({{ + benchitem.PMin + '-' + benchitem.PMax +
                                    benchitem.Unit }})</span>
                                <el-input-number :placeholder="'范围[' + benchitem.PMin + ' -' + benchitem.PMax + ']'
                                    " :controls="false" v-model="bench_list[benchitem.key]['position']"
                                    :min="benchitem.PMin" :max="benchitem.PMax"></el-input-number>
                            </div>


                            <div class="post_position_input">
                                <span class="setting_title">点动步进:{{ benchitem.Unit }}</span>
                                <el-input-number :controls="false"
                                    v-model="bench_list[benchitem.key]['step']"></el-input-number>
                                <el-input-number class='step' :placeholder="'范围[' + benchitem.PMin + ' -' + benchitem.PMax + ']'
                                    " :controls="true" v-model="bench_list[benchitem.key]['position']"
                                    :step="bench_list[benchitem.key]['step']" :min="benchitem.PMin"
                                    :max="benchitem.PMax"
                                    @change="benchmove(benchitem.name, benchitem.key)"></el-input-number>
                            </div>

                        </div>

                        <div class="post_button">
                            <el-button class="el-button-success stop" type="text" icon="el-icon-video-pause"
                                @click="benchstop(benchitem.name)" style="display: flex; align-items: center">停止
                            </el-button>
                            <el-button class="el-button-stop" type="text" icon="el-icon-s-tools"
                                @click="benchmove(benchitem.name, benchitem.key)">移动
                            </el-button>
                            <el-button class="el-button-stop" type="text" icon="el-icon-s-tools"
                                v-if="benchitem.name == '图卡移动'" @click="SetRailGoHome()">设备回零
                            </el-button>
                        </div>

                    </div>
                </div>
            </el-row>

            <el-row class='leftcardthree' :gutter="9">

                <div class="body">

                    <div class="body_center">
                        <span class="title">
                        </span>
                        <!-- <img src="static/tof.png" alt=""> -->

                    </div>
                    <div class="body_right">
                        <span class="title">数据信息


                        </span>

                        <!-- <el-button icon="el-icon-circle-plus" class='setting_edit_clear' type="danger"
                        @click="cmslocation()">添加参数</el-button> -->
                        <el-button icon="el-icon-s-tools" class='setting_edit' type="primary"
                            @click="cmslocation()">参数设置</el-button>
                        <el-button icon="el-icon-delete" class='setting_edit_clear' type="danger"
                            @click="cleardata()">清空数据</el-button>

                        <div class="parent-class">
                            <div></div>
                            <el-input style="color:green" v-model="analyserlist[test_name]['name']"></el-input>
                        </div>
                        <el-table :data="tableData" border height="150" class="my-black-table">

                            <el-table-column prop="CardMovePosition" label="图卡移动" width="90">
                            </el-table-column>
                            <el-table-column prop="CardMoveRotate" label="图卡旋转" width="90">
                            </el-table-column>
                            <el-table-column prop="Pitch" label="Pitch" width="90">
                            </el-table-column>
                            <el-table-column prop="Roll" label="Roll" width="90">
                            </el-table-column>
                            <el-table-column prop="Yaw" label="Yaw" width="90">
                            </el-table-column>
                            <el-table-column prop="Z" label="Z" width="90">
                            </el-table-column>
                            <el-table-column prop="AnalyzeData"  label="AnalyzeData" width="256">
                            </el-table-column>
                       
                        </el-table>
                    </div>

                </div>

            </el-row>
        </el-col>
        <el-col :span="10" class="rightlight">
            <div class="light_list">
                <span class="title_name">激光雷达导轨移动</span>
                <div class="bench-box" v-for="(benchitem, benchkey) in this.benchlist.slice(2, 9)">


                    <span class="move_title">{{ benchitem.name }}(当前位置)</span>
                    <span class="now_position">

                        {{ bench_list[benchitem.key]["s"] }}
                        {{ benchitem.Unit }}
                    </span>
                    <div class="post_position">
                        <div class="post_position_input">
                            <span class="setting_title">移动速度：({{ + benchitem.VMin + '-' + benchitem.VMax +
                                benchitem.Unit + '/s' }})</span>
                            <el-input-number :placeholder="'范围[' + benchitem.VMin + ' -' + benchitem.VMax + ']'
                                " :controls="false" v-model="bench_list[benchitem.key]['v']" :min="benchitem.VMin"
                                :max="benchitem.VMax"></el-input-number>
                        </div>
                        <div class="post_position_input">
                            <span class="setting_title">移动位置： ({{ + benchitem.PMin + '-' + benchitem.PMax +
                                benchitem.Unit }})</span>
                            <el-input-number :placeholder="'范围[' + benchitem.PMin + ' -' + benchitem.PMax + ']'
                                " :controls="false" v-model="bench_list[benchitem.key]['position']"
                                :min="benchitem.PMin" :max="benchitem.PMax"></el-input-number>
                        </div>
                    </div>
                    <div class="post_button">
                        <el-button class="el-button-success stop" type="text" icon="el-icon-video-pause"
                            @click="benchstop(benchitem.name)" style="display: flex; align-items: center">停止
                        </el-button>
                        <el-button class="el-button-stop" type="text" icon="el-icon-s-tools"
                            @click="benchmove(benchitem.name, benchitem.key)">移动
                        </el-button>
                    </div>
                    <div class="post_position">
                        <div class="post_position_inputs">
                            <span class="setting_titles">点动步进： </span>
                            <el-input-number class="number_left" :controls="false"
                                v-model="bench_list[benchitem.key]['step']"></el-input-number>
                            <el-input-number class="number_left" :placeholder="'范围[' + benchitem.PMin + ' -' + benchitem.PMax + ']'
                                " :controls="true" v-model="bench_list[benchitem.key]['position']"
                                :step="bench_list[benchitem.key]['step']" :min="benchitem.PMin" :max="benchitem.PMax"
                                @change="benchmove(benchitem.name, benchitem.key)"></el-input-number>
                            <!-- <el-select v-model="bench_list[benchitem.key]['step']">
                                <el-option v-for="stepitem in steplist" :key="stepitem.key" :label="stepitem.step" :value="stepitem.label">
                                </el-option>
                            </el-select> -->
                        </div>


                    </div>

                </div>








            </div>
            <div class="body_left">
                <span class="title_name">激光雷达控制<el-select v-model="FieldAngle_id" size="small" style="width: 150px;">
                    <el-option  v-for="item in FieldAngle_name" :key="item.id" :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select><el-button  type="primary"
                        @click="GoMoveAxis()">移动
                    </el-button></span>
                <el-button class="caret-right" type="primary" icon="el-icon-caret-right"
                    @click="AnalyzeData()"></el-button>
                <div class="capture">
                    拍&nbsp;&nbsp;摄
                </div>

            </div>
            <div class="body_right">
                <img src="static/图层 2.png">
            </div>



        </el-col>


        <el-dialog title="修改图卡" :visible.sync="is_update_card" :before-close="handleClose_is_update_card" width="30%">
            <el-form>
                <el-form-item label="图卡名称:" :label-width="formLabelWidth">
                    <el-input v-model="card_one.pictrue_name"></el-input>
                </el-form-item>
                <el-form-item label="卡槽:" :label-width="formLabelWidth">


                    <el-select v-model="card_one.sort" placeholder="请选择">
                        <el-option v-for="item in sort" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片地址:" :label-width="formLabelWidth">
                    <el-input v-model="card_one.picture_url" style="width: 200px;"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="is_update_card = false">取 消</el-button>
                <el-button type="primary" @click='update_card'>确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="测试参数" :visible.sync="cmclocation" :before-close="handleClose">
            <el-form>
                <h3>HFOV(°):<el-input v-model="H_FOV"></el-input></h3>
                <h3>VFOV(°):<el-input v-model="V_FOV"></el-input></h3>
                <h3>测试项设置:<el-select v-model="test_name">
                        <el-option v-for="stepitem in analyserlist" :key="stepitem.id" :label="stepitem.name"
                            :value="stepitem.id">
                        </el-option>
                    </el-select></h3>
                <!-- <h3>筛选模式:<el-select></el-select></h3>
                <h3>拍摄数量:<el-input></el-input></h3>
                <h3>要求准度:<el-input></el-input></h3>
                <h3>强度筛选下限:<el-input></el-input></h3>

                <h3>要求精度:<el-input></el-input></h3>
                <h3>水平角度分辨率(°):<el-input></el-input></h3>
                <h3>垂直角度分辨率(°):<el-input></el-input></h3>
                <h3>分析区域大小:<el-input></el-input></h3>
                <h3>拍摄分析帧数:<el-input></el-input></h3> -->
                <!-- <h3>test_num:<el-input></el-input></h3> -->
                <div v-if="test_name == 0">
                    <!-- <h3>实际标定距离:<el-input></el-input></h3> -->
                    <h3>图卡位置区间下限(m):<el-input v-model="mindis_Perpendicularity"></el-input></h3>
                    <h3>图卡位置区间上限(m):<el-input v-model="maxdis_Perpendicularity"></el-input></h3>
                    <h3>强度筛选下限(m):<el-input v-model="thresh_Perpendicularity"></el-input></h3>
                    <!-- <h3>激光雷达相对安装角度转过的水平角度:<el-input></el-input></h3>
                    <h3>激光雷达相对安装角度转过的垂直角度:<el-input></el-input></h3> -->

                </div>
                <div v-if="test_name == 1">
                    <!-- <h3>实际标定距离:<el-input></el-input></h3> -->
                    <h3>拍摄张数:<el-input v-model="laser_radar_distancetest"></el-input></h3>
                    <h3>要求精度(m):<el-input v-model="require_accuracy_distancetest"></el-input></h3>
                    <h3>要求准度(m):<el-input v-model="require_precision_distancetest"></el-input></h3>
                    <h3>水平角分辨率(°):<el-input v-model="R_H_distancetest"></el-input></h3>
                    <h3>垂直角分辨率(°):<el-input v-model="R_V_distancetest"></el-input></h3>
                    <h3>分析区域大小:<el-input v-model="test_num_distancetest"></el-input></h3>
                    <h3>图卡位置区间相对下限:<el-input v-model="mindis_distancetest"></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input v-model="maxdis_distancetest"></el-input></h3>
                    <h3>强度筛选下限:<el-input v-model="thresh_distancetest"></el-input></h3>
                    <!-- <h3>激光雷达相对安装角度转过的水平角度:<el-input></el-input></h3>
                    <h3>激光雷达相对安装角度转过的垂直角度:<el-input></el-input></h3> -->

                </div>
                <div v-if="test_name == 2">
                    <!-- <h3>实际标定距离:<el-input></el-input></h3> -->
                    <h3>拍摄张数:<el-input v-model="laser_radar_distancetest_nearly"></el-input></h3>
                    <h3>要求精度(m):<el-input v-model="require_accuracy_distancetest_nearly"></el-input></h3>
                    <h3>要求准度(m):<el-input v-model="require_precision_distancetest_nearly"></el-input></h3>
                    <h3>水平角分辨率(°):<el-input v-model="R_H_distancetest_nearly"></el-input></h3>
                    <h3>垂直角分辨率(°):<el-input v-model="R_V_distancetest_nearly"></el-input></h3>
                    <h3>分析区域大小:<el-input v-model="test_num_distancetest_nearly"></el-input></h3>
                    <h3>图卡位置区间相对下限:<el-input v-model="mindis_distancetest_nearly"></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input v-model="maxdis_distancetest_nearly"></el-input></h3>
                    <h3>强度筛选下限:<el-input v-model="thresh_distancetest_nearly"></el-input></h3>
                    <!-- <h3>激光雷达相对安装角度转过的水平角度:<el-input></el-input></h3>
                    <h3>激光雷达相对安装角度转过的垂直角度:<el-input></el-input></h3> -->
                </div>
                <div v-if="test_name == 3">
                    <!-- <h3>图卡到激光雷达的距离:<el-input></el-input></h3> -->
                    <!-- <h3>要求精度:<el-input></el-input></h3>
                    <h3>要求准度:<el-input></el-input></h3> -->
                    <h3>拍摄张数:<el-input v-model="laser_radar_DisAPtest"></el-input></h3>
                    <h3>水平角分辨率(°):<el-input v-model="R_H_DisAPtest"></el-input></h3>
                    <h3>垂直角分辨率(°):<el-input v-model="R_V_DisAPtest"></el-input></h3>
                    <h3>分析区域大小:<el-input v-model="test_num_DisAPtest"></el-input></h3>
                    <h3>图卡位置区间相对下限:<el-input v-model="mindis_DisAPtest"></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input v-model="maxdis_DisAPtest"></el-input></h3>
                    <h3>强度筛选下限:<el-input v-model="thresh_DisAPtest"></el-input></h3>

                </div>


                <div v-if="test_name == 4">
                    <h3>拍摄张数:<el-input v-model="laser_radar_FovTest"></el-input></h3>
                    <h3>边缘检测区域范围:<el-input v-model="regionlim_FovTest"></el-input></h3>
                    <h3>检测边缘:<el-select v-model="Direction_FovTest">
                            <el-option v-for="stepitem in Direction" :key="stepitem.id" :label="stepitem.name"
                                :value="stepitem.id">
                            </el-option>
                        </el-select></h3>
                    <h3>测试板宽:<el-input v-model="Board_w_BoardAngle_FovTest"></el-input></h3>
                    <h3>测试板高:<el-input v-model="Board_h_BoardAngle_FovTest"></el-input></h3>
                    <!-- <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3> -->

                </div>
                <div v-if="test_name == 5">
                    <h3>检测方向:<el-select v-model="Detection_edge_ResolutionAngle">
                            <el-option v-for="stepitem in DetectionDirection" :key="stepitem.id" :label="stepitem.name"
                                :value="stepitem.id">
                            </el-option>
                        </el-select></h3>
                    <h3>拍摄张数:<el-input v-model="laser_radar_ResolutionAngle"></el-input></h3>
                    <h3>图卡位置区间相对下限:<el-input v-model="min_dis_ResolutionAngle"></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input v-model="max_dis_ResolutionAngle"></el-input></h3>
                    <h3>强度筛选下限:<el-input v-model="thresh_ResolutionAngle"></el-input></h3>
                </div>
                <div v-if="test_name == 6">
                    <h3>检测方向:<el-select v-model="Detection_direction">
                            <el-option v-for="stepitem in DetectionDirection" :key="stepitem.id" :label="stepitem.name"
                                :value="stepitem.id">
                            </el-option>
                        </el-select></h3>
                    <h3>图卡位置区间相对下限:<el-input v-model="min_dis_AccuracyAngle"></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input v-model="max_dis_AccuracyAngle"></el-input></h3>
                    <h3>强度筛选下限:<el-input v-model="thresh_AccuracyAngle"></el-input></h3>
                    <div v-if="Detection_direction == 0 || Detection_direction == 1">
                        <h3>Pitch:<el-input v-model="Pitch_AccuracyAngle"></el-input></h3>
                    </div>
                    <div v-if="Detection_direction == 2 || Detection_direction == 3">
                        <h3>Yaw:<el-input v-model="Yaw_AccuracyAngle"></el-input></h3>
                    </div>
                </div>
                <div v-if="test_name == 7">
                    <h3>拍摄张数:<el-input v-model="laser_radar_AccuracyPlane"></el-input></h3>
                    <h3>图卡位置区间相对下限:<el-input v-model="min_dis_AccuracyPlane"></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input v-model="max_dis_AccuracyPlane"></el-input></h3>
                    <h3>强度筛选下限:<el-input v-model="thresh_AccuracyPlane"></el-input></h3>
                    <!-- <h3>图卡位置区间下限:<el-input></el-input></h3>
                    <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3> -->

                </div>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cmclocation = false">取 消</el-button>
                <el-button type="primary" @click="saveanalyzedata">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加参数" :visible.sync="cmclocation_create" :before-close="handleClose">
            <el-form>
                <h3>测试项设置:<el-select v-model="test_name">
                        <el-option v-for="stepitem in analyserlist" :key="stepitem.id" :label="stepitem.name"
                            :value="stepitem.id">
                        </el-option>
                    </el-select></h3>
                <!-- <h3>筛选模式:<el-select></el-select></h3>
                <h3>拍摄数量:<el-input></el-input></h3>
                <h3>要求准度:<el-input></el-input></h3>
                <h3>强度筛选下限:<el-input></el-input></h3>

                <h3>要求精度:<el-input></el-input></h3>
                <h3>水平角度分辨率(°):<el-input></el-input></h3>
                <h3>垂直角度分辨率(°):<el-input></el-input></h3>
                <h3>分析区域大小:<el-input></el-input></h3>
                <h3>拍摄分析帧数:<el-input></el-input></h3> -->
                <!-- <h3>test_num:<el-input></el-input></h3> -->
                <div v-if="test_name == 0">
                    <!-- <h3>实际标定距离:<el-input></el-input></h3> -->
                    <!-- <h3>激光雷达相对安装角度转过的水平角度:<el-input></el-input></h3>
                    <h3>激光雷达相对安装角度转过的垂直角度:<el-input></el-input></h3> -->

                </div>
                <div v-if="test_name == 1">
                    <!-- <h3>实际标定距离:<el-input></el-input></h3> -->
                    <h3>拍摄张数:<el-input></el-input></h3>
                    <h3>要求精度:<el-input></el-input></h3>
                    <h3>要求准度:<el-input></el-input></h3>
                    <h3>水平角分辨率:<el-input></el-input></h3>
                    <h3>垂直角分辨率:<el-input></el-input></h3>
                    <h3>分析区域大小:<el-input></el-input></h3>
                    <h3>图卡位置区间下限:<el-input></el-input></h3>
                    <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3>
                    <!-- <h3>激光雷达相对安装角度转过的水平角度:<el-input></el-input></h3>
                    <h3>激光雷达相对安装角度转过的垂直角度:<el-input></el-input></h3> -->

                </div>
                <div v-if="test_name == 2">
                    <!-- <h3>实际标定距离:<el-input></el-input></h3> -->
                    <h3>拍摄张数:<el-input></el-input></h3>
                    <h3>要求精度:<el-input></el-input></h3>
                    <h3>要求准度:<el-input></el-input></h3>
                    <h3>水平角分辨率:<el-input></el-input></h3>
                    <h3>垂直角分辨率:<el-input></el-input></h3>
                    <h3>分析区域大小:<el-input></el-input></h3>
                    <h3>图卡位置区间下限:<el-input></el-input></h3>
                    <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3>
                    <!-- <h3>激光雷达相对安装角度转过的水平角度:<el-input></el-input></h3>
                    <h3>激光雷达相对安装角度转过的垂直角度:<el-input></el-input></h3> -->
                </div>
                <div v-if="test_name == 3">
                    <!-- <h3>图卡到激光雷达的距离:<el-input></el-input></h3> -->
                    <!-- <h3>要求精度:<el-input></el-input></h3>
                    <h3>要求准度:<el-input></el-input></h3> -->
                    <h3>拍摄张数:<el-input></el-input></h3>
                    <h3>水平角分辨率:<el-input></el-input></h3>
                    <h3>垂直角分辨率:<el-input></el-input></h3>
                    <h3>分析区域大小:<el-input></el-input></h3>
                    <h3>图卡位置区间下限:<el-input></el-input></h3>
                    <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3>

                </div>
                <div v-if="test_name == 7">
                    <h3>拍摄张数:<el-input></el-input></h3>
                    <h3>图卡位置区间相对下限:<el-input></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3>
                    <!-- <h3>图卡位置区间下限:<el-input></el-input></h3>
                    <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3> -->

                </div>

                <div v-if="test_name == 4">
                    <h3>边缘检测区域范围:<el-input></el-input></h3>
                    <h3>检测边缘:<el-select v-model="Direction_name">
                            <el-option v-for="stepitem in Direction" :key="stepitem.id" :label="stepitem.name"
                                :value="stepitem.id">
                            </el-option>
                        </el-select></h3>
                    <h3>测试板宽:<el-input></el-input></h3>
                    <h3>测试板高:<el-input></el-input></h3>
                    <!-- <h3>图卡位置区间上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3> -->

                </div>
                <div v-if="test_name == 5">
                    <h3>图卡位置区间相对下限:<el-input></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3>
                </div>
                <div v-if="test_name == 6">
                    <h3>检测方向:<el-select v-model="DetectionDirection_name">
                            <el-option v-for="stepitem in DetectionDirection" :key="stepitem.id" :label="stepitem.name"
                                :value="stepitem.id">
                            </el-option>
                        </el-select></h3>
                    <h3>图卡位置区间相对下限:<el-input></el-input></h3>
                    <h3>图卡位置区间相对上限:<el-input></el-input></h3>
                    <h3>强度筛选下限:<el-input></el-input></h3>
                    <div v-if="DetectionDirection_name == 0 || DetectionDirection_name == 1">
                        <h3>Pitch:<el-input></el-input></h3>
                    </div>
                    <div v-if="DetectionDirection_name == 2 || DetectionDirection_name == 3">
                        <h3>Yaw:<el-input></el-input></h3>
                    </div>
                </div>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cmclocation_create = false">取 消</el-button>
                <el-button type="primary" @click="savecms">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import myIcon from '~@/pages/static/回仓.png';
export default {

    data() {
        return {
            FieldAngle_id :0,
            FieldAngle_name: [{ id: 0, name: '中心视角' }, { id: 1, name: '左上视角' }, { id: 2, name: '中上视角' }, { id: 3, name: '右上视角' }, { id: 4, name: '左中视角' }, 
            {id: 5,name:'右中视角'}, {id: 6,name:'左下视角'}, {id: 7,name:'中下视角'}, {id: 8,name:'右下视角'}],
            // myIcon: require('~@/pages/static/回仓.png'),
            // analyser_name:'',
            test_name: 1,
            tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
            Direction_name: 0,
            Direction: [{ id: 0, name: '上边缘' }, { id: 1, name: '下边缘' }, { id: 2, name: '左边缘' }, { id: 3, name: '右边缘' }],
            DetectionDirection_name: 0,
            DetectionDirection: [{ id: 0, name: '上' }, { id: 1, name: '下' }, { id: 2, name: '左' }, { id: 3, name: '右' }],
            analyserlist: [
                { id: 0, name: '0、雷达垂直度分析', label: 'FitPlaneAnalyzer' },
                { id: 1, name: '1、测远能力', label: 'distancetest' },
                { id: 2, name: '2、测近能力', label: 'distancetest' },
                { id: 3, name: '3、测距精准度', label: 'DisAPtest' },

                // {name:'角度精度',label:'AccuracyAngle'},

                { id: 4, name: '4、视场角', label: 'FovTest' },
                { id: 5, name: '5、角度分辨率', label: 'ResolutionAngle' },
                { id: 6, name: '6、角度准度', label: 'AccuracyAngle' },
                { id: 7, name: '7、平面度', label: 'AccuracyPlane' },
            ],
            bench_list: [
                { s: 0, v: 200, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },
                { s: 0, v: 3, position: "", step: 1 },

            ],
            steplist: [
                { key: 1, step: 0.1 },
                { key: 2, step: 1 },
                { key: 3, step: 10 },
                { key: 4, step: 100 }
            ],
            benchlist: [

            ],
            activeIndex: 0,
            indexcard: 0,
            clickedIndex: -1,
            cmclocation: false,
            cmclocation_create: false,
            lightcode: '若灯光无法开启请重新连接光源',
            is_update_card: false,
            formLabelWidth: "120",
            is_lightcreate: false,
            light_select: 0,
            light: {
                'username': '',
                'lux': '',
                'cct': '',
                'eight': '',
                'nine': '',
            },
            start_light_lux: '',
            start_light_cct: '',
            start_light_id: '5',
            // start_light: {
            //     'username': '',
            //     'lux': 3000,
            //     'cct': 6500,
            //     'eight': 0,
            //     'nine': 0,
            //     'id': 10,
            // },
            card_one: {
                'id': '',
                'pictrue_name': '',
                'is_sort': '',
                'sort': '',
                'picture_url': '',
            },
            sort: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            currentDate: new Date(),
            card_all: '',
            baseUrl: this.$settings.BASE_URL + "media/",
            H_FOV: 0,
            V_FOV: 0,
            mindis_Perpendicularity:0,
            maxdis_Perpendicularity:0,
            thresh_Perpendicularity:0,
            laser_radar_distancetest: 0,
            require_accuracy_distancetest: 0,
            require_precision_distancetest: 0,
            R_H_distancetest: 0,
            R_V_distancetest: 0,
            test_num_distancetest: 0,
            mindis_distancetest: 0,
            maxdis_distancetest: 0,
            thresh_distancetest: 0,
            laser_radar_distancetest_nearly: 0,
            require_accuracy_distancetest_nearly: 0,
            require_precision_distancetest_nearly: 0,
            R_H_distancetest_nearly: 0,
            R_V_distancetest_nearly: 0,
            test_num_distancetest_nearly: 0,
            mindis_distancetest_nearly: 0,
            maxdis_distancetest_nearly: 0,
            thresh_distancetest_nearly: 0,
            laser_radar_DisAPtest: 0,
            R_H_DisAPtest: 0,
            R_V_DisAPtest: 0,
            test_num_DisAPtest: 0,
            mindis_DisAPtest: 0,
            maxdis_DisAPtest: 0,
            thresh_DisAPtest: 0,
            laser_radar_FovTest: 0,
            Direction_FovTest: 0,
            regionlim_FovTest: 0,
            Board_w_BoardAngle_FovTest: 0,
            Board_h_BoardAngle_FovTest: 0,
            laser_radar_ResolutionAngle: 0,
            min_dis_ResolutionAngle: 0,
            max_dis_ResolutionAngle: 0,
            thresh_ResolutionAngle: 0,
            laser_radar_AccuracyAngle: 0,
            min_dis_AccuracyAngle: 0,
            max_dis_AccuracyAngle: 0,
            thresh_AccuracyAngle: 0,
            Detection_direction: 0,
            Pitch_AccuracyAngle: 0,
            Yaw_AccuracyAngle: 0,
            laser_radar_AccuracyPlane: 0,
            min_dis_AccuracyPlane: 0,
            max_dis_AccuracyPlane: 0,
            thresh_AccuracyPlane: 0,
            Detection_edge_ResolutionAngle:0,
        };
    },
    created() {
        // this.AnalyzeData()
        this.GetCard()
        this.Getbench()
        this.getallinform()
        this.setupWebSocket()
        this.GetTofRadarHV()
        this.GetDistanceFinding()
        this.GetSettingData()
        this.GetProximityMeasurement()
        this.GetRangeAccuracy()
        this.GetFieldAngle()
        this.GetAngularResolution()
        this.GetAngularAccuracy()
        this.GetFlatness()
        this.GetPerpendicularity()
    },
    methods: {
        // 清空数据
        cleardata(){
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/cleardata/`, {
            }).then((res) => {
                if (res.data.code == 100) {
                    this.GetSettingData()
                    this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                }
            })
        },
        // 移动六轴云台
        GoMoveAxis(){

        },
        // 获取雷达垂直度分析数据
        GetPerpendicularity(){
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/FitPlane/`, {
            }).then((res) => {
                if (res.data.code == 100) {
                    console.log(res.data.data[0])
                    this.mindis_Perpendicularity=res.data.data[0]['mindis_Perpendicularity'],
                    this.maxdis_Perpendicularity=res.data.data[0]['maxdis_Perpendicularity'],
                    this.thresh_Perpendicularity=res.data.data[0]['thresh_Perpendicularity']
                }
            })
        },
        AnalyzeData() {
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_task/${this.analyserlist[this.test_name]['label']}/`, {
                'id': this.test_name
            }).then((res) => {
                this.GetSettingData()
                if (res.data.code == 100) {
                    this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                    
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    });
                }
                
            })

        },
        GetSettingData() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/SettingData/`, {
            }).then((res) => {
                if (res.data.code == 100) {
                    this.tableData = res.data.data
                }
            })
        },
        saveanalyzedata() {
            this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/TofRadarHV/1/`, {
                'H_FOV': this.H_FOV,
                'V_FOV': this.V_FOV
            }).then((res) => {
                if (res.data.code == 100) {
                    if (this.test_name == 1) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/DistanceFinding/1/`,
                            {
                                'laser_radar_distancetest': this.laser_radar_distancetest,
                                'require_accuracy_distancetest': this.require_accuracy_distancetest,
                                'require_precision_distancetest': this.require_precision_distancetest,
                                'R_H_distancetest': this.R_H_distancetest,
                                'R_V_distancetest': this.R_V_distancetest,
                                'test_num_distancetest': this.test_num_distancetest,
                                'mindis_distancetest': this.mindis_distancetest,
                                'maxdis_distancetest': this.maxdis_distancetest,
                                'thresh_distancetest': this.thresh_distancetest
                            }
                        ).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    }else if(this.test_name == 0){
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/FitPlane/1/`,
                            {
                                'mindis_Perpendicularity': this.mindis_Perpendicularity,
                                'maxdis_Perpendicularity': this.maxdis_Perpendicularity,
                                'thresh_Perpendicularity': this.thresh_Perpendicularity,
                            }
                        ).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    } else if (this.test_name == 2) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/ProximityMeasurement/1/`,
                            {
                                'laser_radar_distancetest': this.laser_radar_distancetest_nearly,
                                'require_accuracy_distancetest': this.require_accuracy_distancetest_nearly,
                                'require_precision_distancetest': this.require_precision_distancetest_nearly,
                                'R_H_distancetest': this.R_H_distancetest_nearly,
                                'R_V_distancetest': this.R_V_distancetest_nearly,
                                'test_num_distancetest': this.test_num_distancetest_nearly,
                                'mindis_distancetest': this.mindis_distancetest_nearly,
                                'maxdis_distancetest': this.maxdis_distancetest_nearly,
                                'test_num_distancetest': this.thresh_distancetest_nearly
                            }
                        ).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    } else if (this.test_name == 3) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/RangeAccuracy/1/`, {
                            'laser_radar_DisAPtest': this.laser_radar_DisAPtest,
                            'R_H_DisAPtest': this.R_H_DisAPtest,
                            'R_V_DisAPtest': this.R_V_DisAPtest,
                            'test_num_DisAPtest': this.test_num_DisAPtest,
                            'mindis_DisAPtest': this.mindis_DisAPtest,
                            'maxdis_DisAPtest': this.maxdis_DisAPtest,
                            'thresh_DisAPtest': this.thresh_DisAPtest
                        }).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    } else if (this.test_name == 4) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/FieldAngle/1/`, {
                            'laser_radar_FovTest': this.laser_radar_FovTest,
                            'Direction_FovTest': this.Direction_FovTest,
                            'regionlim_FovTest': this.regionlim_FovTest,
                            'Board_w_BoardAngle_FovTest': this.Board_w_BoardAngle_FovTest,
                            'Board_h_BoardAngle_FovTest': this.Board_h_BoardAngle_FovTest
                        }).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    } else if (this.test_name == 5) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/AngularResolution/1/`, {
                            'laser_radar_ResolutionAngle': this.laser_radar_ResolutionAngle,
                            'min_dis_ResolutionAngle': this.min_dis_ResolutionAngle,
                            'max_dis_ResolutionAngle': this.max_dis_ResolutionAngle,
                            'thresh_ResolutionAngle': this.thresh_ResolutionAngle,
                            'Detection_edge_ResolutionAngle':this.Detection_edge_ResolutionAngle
                        }).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    } else if (this.test_name == 6) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/AngularAccuracy/1/`, {
                            'laser_radar_AccuracyAngle': this.laser_radar_AccuracyAngle,
                            'min_dis_AccuracyAngle': this.min_dis_AccuracyAngle,
                            'max_dis_AccuracyAngle': this.max_dis_AccuracyAngle,
                            'thresh_AccuracyAngle': this.thresh_AccuracyAngle,
                            'Detection_direction': this.Detection_direction,
                            'Pitch_AccuracyAngle': this.Pitch_AccuracyAngle,
                            'Yaw_AccuracyAngle': this.Yaw_AccuracyAngle
                        }).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    } else if (this.test_name == 7) {
                        this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/Flatness/1/`, {
                            'laser_radar_AccuracyPlane': this.laser_radar_AccuracyPlane,
                            'min_dis_AccuracyPlane': this.min_dis_AccuracyPlane,
                            'max_dis_AccuracyPlane': this.max_dis_AccuracyPlane,
                            'thresh_AccuracyPlane': this.thresh_AccuracyPlane
                        }).then((res) => {
                            if (res.data.code == 100) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.cmclocation = false
                            }
                        })
                    }

                }
            })
        },
        GetTofRadarHV() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/TofRadarHV/`).then((res) => {
                if (res.data.code == 100) {
                    this.H_FOV = res.data.data[0]['H_FOV']
                    this.V_FOV = res.data.data[0]['V_FOV']
                }
            })
        },
        GetDistanceFinding() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/DistanceFinding/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_distancetest = res.data.data[0]['laser_radar_distancetest'],
                        this.require_accuracy_distancetest = res.data.data[0]['require_accuracy_distancetest'],
                        this.require_precision_distancetest = res.data.data[0]['require_precision_distancetest'],
                        this.R_H_distancetest = res.data.data[0]['R_H_distancetest'],
                        this.R_V_distancetest = res.data.data[0]['R_V_distancetest'],
                        this.test_num_distancetest = res.data.data[0]['test_num_distancetest'],
                        this.mindis_distancetest = res.data.data[0]['mindis_distancetest'],
                        this.maxdis_distancetest = res.data.data[0]['maxdis_distancetest'],
                        this.thresh_distancetest = res.data.data[0]['test_num_distancetest']
                }
            })
        },
        GetProximityMeasurement() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/ProximityMeasurement/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_distancetest_nearly = res.data.data[0]['laser_radar_distancetest'],
                        this.require_accuracy_distancetest_nearly = res.data.data[0]['require_accuracy_distancetest'],
                        this.require_precision_distancetest_nearly = res.data.data[0]['require_precision_distancetest'],
                        this.R_H_distancetest_nearly = res.data.data[0]['R_H_distancetest'],
                        this.R_V_distancetest_nearly = res.data.data[0]['R_V_distancetest'],
                        this.test_num_distancetest_nearly = res.data.data[0]['test_num_distancetest'],
                        this.mindis_distancetest_nearly = res.data.data[0]['mindis_distancetest'],
                        this.maxdis_distancetest_nearly = res.data.data[0]['maxdis_distancetest'],
                        this.thresh_distancetest_nearly = res.data.data[0]['test_num_distancetest']
                }
            })
        },
        GetRangeAccuracy() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/RangeAccuracy/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_DisAPtest = res.data.data[0]['laser_radar_DisAPtest'],
                        this.R_H_DisAPtest = res.data.data[0]['R_H_DisAPtest'],
                        this.R_V_DisAPtest = res.data.data[0]['R_V_DisAPtest'],
                        this.test_num_DisAPtest = res.data.data[0]['test_num_DisAPtest'],
                        this.mindis_DisAPtest = res.data.data[0]['mindis_DisAPtest'],
                        this.maxdis_DisAPtest = res.data.data[0]['maxdis_DisAPtest'],
                        this.thresh_DisAPtest = res.data.data[0]['thresh_DisAPtest']
                }
            })
        },
        GetFieldAngle() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/FieldAngle/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_FovTest = res.data.data[0]['laser_radar_FovTest'],
                        this.Direction_FovTest = res.data.data[0]['Direction_FovTest'],
                        this.regionlim_FovTest = res.data.data[0]['regionlim_FovTest'],
                        this.Board_w_BoardAngle_FovTest = res.data.data[0]['Board_w_BoardAngle_FovTest'],
                        this.Board_h_BoardAngle_FovTest = res.data.data[0]['Board_h_BoardAngle_FovTest']
                }
            })
        },
        GetAngularResolution() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/AngularResolution/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_ResolutionAngle = res.data.data[0]['laser_radar_ResolutionAngle'],
                        this.min_dis_ResolutionAngle = res.data.data[0]['min_dis_ResolutionAngle'],
                        this.max_dis_ResolutionAngle = res.data.data[0]['max_dis_ResolutionAngle'],
                        this.thresh_ResolutionAngle = res.data.data[0]['thresh_ResolutionAngle'],
                        this.Detection_edge_ResolutionAngle = res.data.data[0]['Detection_edge_ResolutionAngle']
                }
            })
        },
        GetAngularAccuracy() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/AngularAccuracy/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_AccuracyAngle = res.data.data[0]['laser_radar_AccuracyAngle'],
                        this.min_dis_AccuracyAngle = res.data.data[0]['min_dis_AccuracyAngle'],
                        this.max_dis_AccuracyAngle = res.data.data[0]['max_dis_AccuracyAngle'],
                        this.thresh_AccuracyAngle = res.data.data[0]['thresh_AccuracyAngle'],
                        this.Detection_direction = res.data.data[0]['Detection_direction'],
                        this.Pitch_AccuracyAngle = res.data.data[0]['Pitch_AccuracyAngle'],
                        this.Yaw_AccuracyAngle = res.data.data[0]['Yaw_AccuracyAngle']
                }
            })
        },
        GetFlatness() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/Flatness/`).then((res) => {
                if (res.data.code == 100) {
                    this.laser_radar_AccuracyPlane = res.data.data[0]['laser_radar_AccuracyPlane'],
                        this.min_dis_AccuracyPlane = res.data.data[0]['min_dis_AccuracyPlane'],
                        this.max_dis_AccuracyPlane = res.data.data[0]['max_dis_AccuracyPlane'],
                        this.thresh_AccuracyPlane = res.data.data[0]['thresh_AccuracyPlane']
                }
            })
        },
        cmslocation() {

            this.cmclocation = true
        },
        cmslocation_create() {
            this.cmclocation_create = true
        },
        setupWebSocket() {
            this.websocket = new WebSocket("ws://127.0.0.1:8000/socket/TofChart/"); // 创建WebSocket连接
            this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
            this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
            this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
        },
        onWebSocketOpen() {
            console.log("链接成功");
        },
        onWebSocketMessage(event) {
            var message = event.data;
            var dictionary = JSON.parse(message)
            // console.log('message', dictionary.message.index, dictionary.message.location)
            this.bench_list[dictionary.message.index]['s'] = dictionary.message.location
            // console.log(this.bench_list[dictionary.message.index]['s'])
            // this.bench[dictionary.message.index]['position'] = dictionary.message.location

            // 在这里您可以根据消息的内容执行不同的操作，例如更新界面、触发事件等
        },

        closeWebSocket() {
            if (this.websocket) {
                this.websocket.close(); // 关闭WebSocket连接
            }
        },
        // 设备回零
        SetRailGoHome() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SetRailGoHome/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },

        benchmove(name, id) {
            console.log('我移动了', this.bench_list[id]['v'], parseFloat(this.bench_list[id]['position']))
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/MoveAxis/`, {
                'axis': name,
                'velocity': this.bench_list[id]['v'],
                'position': parseFloat(this.bench_list[id]['position'])
            }).then((res) => {
                if (res.data.code == 100) {

                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    // resolve();
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        benchstop(id) {
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SetSpeedAndPosition/`, {
                'axis': id
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            });
            // });
            // this.sleep(3000)


            //  this.stop_plc()
        },
        getallinform() {
            const cmsControlMainGuideGetCmsMainPosition = 'tof_chart/TOFChartGuide/GetCurrentPosition/';
            console.log(this.$settings.BASE_URL_TOF + cmsControlMainGuideGetCmsMainPosition)
            this.$axios.get(this.$settings.BASE_URL_TOF + cmsControlMainGuideGetCmsMainPosition).then((res) => {
                if (res.data.code == 100) {
                    this.bench_list = res.data.data;
                }
                // alert(this.bench[0]['p'])
                else {
                    this.$notify.error({ title: res.data.msg });
                }
                // alert(this.bench[0]['p'])
            })
        },
        Getbench() {
            // this.loading_DeviceReset = true
            this.$axios.get(this.$settings.BASE_URL_TOF + 'tof_chart/is_guide/'
            ).then((res) => {
                if (res.data.code == 100) {
                    console.log(res.data.data)
                    this.benchlist = res.data.data
                }
            })
        },
        setActive(index) {
            this.activeIndex = index;
        },
        // 获取当前图卡
        get_at_present_card() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/GetCurrentImageCardId/`).then((res) => {
                console.log('GetCardCurrent',)
                if (res.data.code == 100) {
                    console.log(res.data.data)
                    this.clickedIndex = res.data.data - 1
                } else {
                    this.$message.error(res.data.msg);
                }
            })

        },

        update_card() {
            console.log('update_card')
            this.$axios.put(this.$settings.BASE_URL_TOF + `tof_chart/ListCard/${this.card_one.id}/`, {
                'card_name': this.card_one.pictrue_name,
                'card_slot': this.card_one.sort,
                'image': this.card_one.picture_url,
            }).then((res) => {
                if (res.data.code == 100) {
                    this.GetCard()
                    this.is_update_card = false
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        GetCardOne(all) {
            this.card_one.id = all.id
            this.card_one.pictrue_name = all.card_name
            this.card_one.sort = all.card_slot
            this.card_one.picture_url = all.image
            this.is_update_card = true

        },
        handleClose_is_lightcreate(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        handleClose_is_update_card(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        // 获取当前图卡
        GetCard() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/ListCard`).then((res) => {
                if (res.data.code == 100) {
                    console.log('------', res.data.data)
                    this.card_all = res.data.data
                    console.log(this.card_all, '---')
                    // this.get_at_present_card()
                }
                else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 开灯
        light_start() {
            if (this.start_light_id == 5) {
                this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Light/qclight/OpenLight/`, { 'brightness': this.start_light_lux, 'sec_name': this.start_light_cct }).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            } else {
                this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Light/ccxllight/OpenLight/`, { 'brightness': this.start_light_lux, 'sec_name': this.start_light_cct, 'light_id': this.start_light_id }).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }



        },
        // // 连接光源
        // LightInit() {
        //     this.$axios.get(this.$settings.BASE_URL_CMS + `lightauto/lightinit/`).then((res) => {
        //         if (res.data.code == 100) {
        //             this.lightcode = res.data.msg
        //         } else {
        //             this.lightcode = res.data.msg
        //         }
        //     })
        // },
        // // 断开连接
        // LightBreak() {
        //     this.$axios.get(this.$settings.BASE_URL_CMS + `lightauto/lightbreak/`).then((res) => {
        //         if (res.data.code == 100) {
        //             this.lightcode = res.data.msg
        //         } else {
        //             this.lightcode = res.data.msg
        //         }
        //     })
        // },
        // 关灯
        light_stop() {
            if (this.start_light_id == 5) {
                this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Light/qclight/OFFLight/`).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            } else {
                this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Light/ccxllight/OFFLight/`).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })

            }
        },
        // 获取com口
        get_com() {
            this.$axios.get(this.$settings.BASE_URL_CMS + `Ccxl/opencom/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.data,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 添加太阳点光源
        Create_Sun_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `PL1C05/PL1C05List/`, {
                'PL1C05_username': this.start_light.username,
                'PL1C05_lux': parseInt(this.start_light.lux),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 添加天空散射光源
        Create_Sky_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `Ccxl/SkyLightList/`, {
                'sky_username': this.start_light.username,
                'sky_lux': parseInt(this.start_light.lux),
                'sky_cct': parseInt(this.start_light.cct),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        Create_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `Ccxl/LightList/`, {
                'username': this.start_light.username,
                'lux': parseInt(this.start_light.lux),
                'cct': parseInt(this.start_light.cct),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(res.data.msg)
        },
        // 切换图卡
        SwitchImage(id) {
            this.clickedIndex = id - 1; // 更新点击的项目索引
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SwitchImageCard/`, { 'card_id': id }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        GoHomeImage() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SetImageCardGoHome/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        }
    }
}
</script>

<style lang="less">
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 确保容器高度为视口高度 */
    margin: 0;
    background-color: #f0f0f0;
    /* 可选背景色 */
}

h3 {
    float: left;
    margin: @h*10vh @w *15vw;
    width: @w *300vw;
}

.el-dialog__body {
    height: @h*500vh
}

.center-image {
    max-width: 100%;
    height: auto;
}

.stop {
    color: red;
}

.el-message-box {
    background-color: #161D26;
    border: #1F2935;
}

.el-dialog {
    background-color: #1F2935;

    .el-form-item__content .el-radio {
        margin-left: @w *15vw;
        // margin-right: @w *15vw;
    }

}

// .el-input-number__decrease{
//     float: left;
// }

.bench-box {
    width: @w * 380vw;
    float: left;
    height: @h*256vh;

    background: #1f2935;
    margin: @h*30vh 0 0 @w * 10vw;
    border-radius: 0px 0px 0px 0px;

    .post_position {
        height: @h*60vh;
        margin: @h*10vh 0;
        width: @w * 380vw;
        float: left;


    }

    .post_position_input {
        float: left;
        width: @w * 170vw;
        margin-left: @w * 20vw;
        height: @h*70vh;

        .el-input {
            float: left;
            width: @w * 165vw !important;
            height: @h*40vh;

            .el-input__inner {
                height: @h*40vh;
                padding: 0;
                font-size: @h*12vh;
                background: #161d26;
                width: @w * 160vw;
                margin: 0;
                text-align: center;
                border: none;
                color: #fff;
            }
        }

        .setting_title {
            float: left;
            width: @w * 160vw;
            height: @h*30vh;
            line-height: @h*30vh;
        }
    }

    .move_title {
        width: @w * 200vw;
        margin-left: @w * 20vw;
        height: @h*50vh;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: @h*22vh;
        font-weight: 700;
        letter-spacing: @w * 1vw;
        color: #ffffff;
        line-height: @h*50vh;
        text-align: left;
        font-style: normal;
        text-transform: none;
        float: left;
    }

    .post_button {
        height: @h*47vh;
        width: @w * 380vw;
        display: flex;
        // float: left;
        justify-content: center;
        align-items: center;

        .el-button {
            float: left;
            margin: 0 @w * 20vw;
        }
    }

    .now_position_long {
        width: @w * 180vw !important;
    }

    .now_position {
        width: @w * 140vw;
        margin: 0 @w * 10vw;
        height: @h*50vh;
        line-height: @h*55vh;
        color: #00b42a;
        font-size: @h*30vh;
        float: left;

        .el-input__suffix {
            float: left;
            color: #00b42a;
            line-height: @h*70vh;
            margin-left: auto;
        }

        .el-input__inner {
            padding: 0;
            margin: 0;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: @h*30vh;
            color: #00b42a;
            // line-height: @h*20vh;
            text-align: left;
            font-style: normal;
            text-transform: none;
            float: left;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            width: fit-content;
        }
    }
}

.el-radio__label {
    color: #fff;
}

.el-dialog__title {
    color: #fff;
}

.el-form-item__content {
    display: flex;

    .el-radio {
        margin-top: @h*15vh;
        margin-left: @w *20vw;
    }

    .el-form-item__label {
        width: @w *115vw;
    }

    .el-input {


        // padding: 0;
        .el-input__inner {
            background-color: #161D26;
            border: none;
            color: #fff;


        }


    }
}

.pictureorlight {
    width: 100%;
    float: left;

    .el-input-number__increase {
        right: 23px;
    }

    .leftcard {
        .bench-box {
            width: @w * 535vw;
            height: @h*200vh;
        }

        .post_position {
            height: @h*70vh;
            margin: @h*10vh 0;
            width: @w * 535vw;
            float: left;


        }

        .post_button {
            height: @h*60vh;
            line-height: @h*60vh;
        }

        .step {
            // width: @w * 110vw;
            // height: @h*40vh;
            // margin-left: @w * 25vw;
            // line-height: @h*40vh;
            margin: @h*20vh 0;
            line-height: @h*38vh;
            width: @w * 186vw;

            .el-input-number__decrease,
            .el-input-number__increase {
                top: 1px;
                height: @h*38vh;
                width: @w * 79vw;
                background-color: #161D26;
                border: 1px solid #0081FF;
                color: #0081FF
            }

            .el-input-number__decrease:active,
            .el-input-number__increase:active {
                background-color: #0081FF;
                /* 按下时背景色变为黑色 */
                color: #fff;
                /* 按下时字体颜色变为白色 */
            }

        }

        .post_position_input {
            float: left;
            width: @w * 155vw;
            margin-left: @w * 20vw;
            height: @h*80vh;

            .el-input {
                float: left;
                width: @w * 165vw !important;
                height: @h*40vh;

                .el-input__inner {
                    height: @h*40vh;
                    padding: 0;
                    font-size: @h*12vh;
                    background: #161d26;
                    width: @w * 160vw;
                    margin: 0;
                    text-align: center;
                    border: none;
                    color: #fff;
                }
            }

            .setting_title {
                float: left;
                width: @w * 160vw;
                height: @h*30vh;
                line-height: @h*30vh;
            }
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            top: 5px;
            height: @h*38vh;
        }

        .light_list {

            width: 100%;
            margin: 0 @w*20vw;
        }

        .title_name {
            width: 100%;
            float: left;
            height: @h*70vh;
            line-height: @h*90vh;
            font-size: @h*30vh;
            margin: 0 @w*20vw;
        }

        .foot {
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            // float: left;
            height: @h*60vh;
            width: @w *1255vw;
            background-color: #1F2935;
            position: absolute;
            bottom: 0;
            left: @w *240vw;

            .my_class {
                float: right;
                height: @h*40vh;
                width: auto;
                padding: 0 @w *10vw;
                background-color: #161D26;
                margin: 0 0 0 @w *10vw;
                border: 0;
                color: #fff;
            }

            .my_class_primary {
                float: right;
                height: @h*40vh;
                width: auto;
                padding: 0 @w *10vw;
                background-color: #0081FF;
                margin: 0 0 0 @w *10vw;
                color: #fff;
                border: 0;
            }
        }

        background-color: #161D26;
        height: 100%;
        // overflow: auto;

        .leftcardthree {
            .body {
                .body_left {
                    float: left;
                    width: @w*240vw;

                    .caret-right {
                        margin: @h*20vh 0 0 @w*70vw;
                        width: @w*100vw;
                        height: @h*100vh;

                    }

                    .capture {
                        width: @w*240vw;
                        text-align: center;
                        height: @h*70vh;
                        line-height: @h*70vh;
                        font-size: @h*25vh;
                    }
                }

                .body_center {
                    width: @w*290vw;
                    float: left;
                    margin: 0 0 0 @w *10vw;

                    .title {
                        float: left;
                        width: @w*180vw;
                        // text-align: center;
                        // font-size: @h*20vh;
                        // width: @w * 200vw;
                        margin-left: @w * 20vw;
                        font-size: @h*22vh;
                        font-weight: 700;
                        letter-spacing: @w * 1vw;
                        color: #ffffff;

                    }

                    img {
                        width: @w*250vw;
                        height: @h*185vh;
                        float: left;
                        margin: @h*20vh @w*20vw;
                    }
                }

                .body_right {
                    float: left;
                    width: @w*805vw;
                    height: @h*400vh;
                    // text-align: center;

                    .el-input {
                        // float: right;
                        background: #161d26;
                        width: @w*105vw;
                        margin: @h*20vh @w*10vw;


                        .el-input__inner {
                            height: @h*20vh;
                            padding: @h*5vh @w*10vw;
                            font-size: 1.31111111vh;
                            background: #161d26;
                            width: @w*105vw;
                            margin: 0;
                            text-align: center;
                            border: none;
                            color: green;
                            font-weight: bold;
                        }
                    }

                    .setting_edit {
                        float: right;
                        padding: @h*5vh @w*10vw;
                        margin: @h*15vh @w*10vw 0 0;
                        width: @w*120vw;
                        font-size: @h*15vh;
                    }

                    .parent-class {
                        text-align: center;
                        color: green
                    }




                    .el-table {
                        width: @w*800vw;
                        // margin: @h*10vh 0vw;
                        height: @h*200vh;
                        float: left;
                    }

                    .my-black-table {
                        width: @w*800vw;
                        // margin: @h*10vh 0vw;
                        height: @h*200vh;
                        float: left;
                        background-color: #161d26;
                        color: #ffffff;
                    }

                    .my-black-table th {
                        text-align: center;
                        background-color: #161d26;
                        color: #ffffff;
                    }

                    .my-black-table td {
                        background-color: #161d26;
                        color: #ffffff;
                    }

                    .title {
                        float: left;
                        width: @w*100vw;
                        // text-align: center;
                        font-size: @h*18vh;
                        // margin: @h*-15vh @w*10vw 0 0;
                        margin-left: @w * 20vw;
                        font-size: @h*22vh;
                        font-weight: 700;
                        letter-spacing: @w * 1vw;
                        color: #ffffff;


                    }

                    .setting_edit_clear {
                        float: right;
                        padding: @h*5vh @w*10vw;
                        margin: @h*15vh @w*10vw 0 0;
                        width: @w*120vw;
                        font-size: @h*15vh;
                        color-scheme: red
                    }
                }

            }

            .title {
                width: @w*120vw;
                height: @h*70vh;
                //font-weight: 700;
                font-size: @h*30vh;
                color: #FFFFFF;
                line-height: @h*90vh;
                text-align: left;
                margin: @h*-15vh @w*20vw;
                // margin-left: @w*40vw;

                .el-button {
                    float: right;
                    margin: @h*20vh @w*20vw;
                }
            }
        }

        .leftcardone {
            .title {
                width: @w*120vw;
                height: @h*70vh;
                //font-weight: 700;
                font-size: @h*30vh;
                color: #FFFFFF;
                line-height: @h*90vh;
                text-align: left;

                margin-left: @w*40vw;

                .el-button {
                    float: right;
                    margin: @h*20vh @w*20vw;
                }

                .setting_edit_clear {

                    // left: 50%;  
                    padding: @h*5vh @w*10vw;
                    margin: @h*15vh @w*10vw 0 0;
                    width: @w*120vw;
                }
            }

        }

        .leftcardtwo {
            border-bottom: 1px solid #8291A9;
            padding-bottom: @h*20vh;
            width: @w*1123vw;
        }

        .overflow-x-hidden {
            overflow-x: hidden !important;
        }

        .cardall {
            padding: 0 0 0 @w*20vw;
            //height: 83%;
            overflow: hidden;
            width: @w*1100vw;
            ;

            .active {
                border: 1px solid #0081FF !important;

                .card_title {
                    background-color: #0081FF !important;
                }
            }

            .cardchoose {
                border: 1px solid #00B42A !important;

                .card_title {
                    background-color: #00B42A !important;
                }
            }

            .card_list {
                width: @w*159vw;
                height: @h*160vh;
                margin: @h*10vh 0 @h*20vh @w*20vw;
                background: #1F2935;
                float: left;
                // display: inline-block;
                border: 1px solid #1F2935;

                .el-badge {
                    left: @w*-10vw;
                    top: @h*-170vh;
                }

                .card_img {
                    height: @h*120vh;

                    display: relative;

                }

                .icon_number {
                    position: relative;
                    color: red;
                    top: 5%;
                    /* 图标置于容器垂直中心 */
                    left: 5%
                }

                .image {
                    // height: @h*180vh;
                    width: @w*160vw;
                    height: @h*120vh;

                }

                .card_title {
                    width: @w*160vw;
                    height: @h*40vh;
                    // line-height: @h*50vh;
                    font-size: @h*20vh;
                    color: #fff;
                    letter-spacing: @h*1vh;
                    // margin-top: 0 !important;
                    line-height: @h*40vh;
                    text-align: center;
                    float: left;
                    background: rgba(130, 145, 169, 0.1);
                }
            }
        }
    }

    .rightlight {
        .body_left {
            float: left;
            width: @w*400vw;
            height: @h*200vh;

            .caret-right {
                margin: @h*70vh 0 0 @w*130vw;
                width: @w*100vw;
                height: @h*100vh;

                .el-icon-caret-right {
                    font-size: @h*50vh;
                }
            }

            .capture {
                width: @w*360vw;
                text-align: center;
                height: @h*100vh;
                line-height: @h*100vh;
                font-size: @h*25vh;
            }
        }

        .bench-box {
            // border: 1px solid #8291A9;
        }

        img {
            float: right;
            margin: @h*15vh @w * 80vw 0 0;
            width: @w * 300vw;
            height: @h*300vh
        }

        .post_position_inputs {
            width: @w * 340vw;
            float: left;
            margin-left: @w * 20vw;
            height: @h*70vh;
        }

        .setting_titles {
            float: left;
            // width: @w * 160vw;
            height: @h*40vh;
            line-height: @h*40vh;
        }

        .number_left {
            float: left;
            width: @w * 110vw;
            height: @h*40vh;
            margin-left: @w * 25vw;
            line-height: @h*40vh;
            color: #0081FF;

            .el-input__inner {
                height: @h*40vh;
                padding: 0;
                font-size: @h*12vh;
                background: #161d26;
                width: @w * 120vw;
                margin: 0;
                text-align: center;
                border: none;
                color: #fff;
            }
        }

        .el-input-number__increase {
            right: -7px;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            top: 1px;
            height: @h*38vh;
            width: @w*58vw;
            background-color: #161D26;
            border: 1px solid #0081FF;
            color: #0081FF
        }

        .el-input-number__decrease:active,
        .el-input-number__increase:active {
            background-color: #0081FF;
            /* 按下时背景色变为黑色 */
            color: #fff;
            /* 按下时字体颜色变为白色 */
        }

        background-color: #161D26;
        height: 93%;
        border-left: 1px solid #8291A9;
        overflow-x: hidden;
        overflow-y: auto;

        .title_name {
            width: 100%;
            float: left;
            height: @h*70vh;
            line-height: @h*90vh;
            font-size: @h*30vh;
            margin: 0 @w*20vw;
        }

        .light_list {

            width: 100%;
            // margin: 0 @w*20vw;



            .span_light {
                width: 100%;
                float: left;
                height: @h*30vh;
                line-height: @h*30vh;
                font-size: @h*16vh;
                margin: @h*10vh @w*20vw;
            }

            .span_list {
                float: left;
                margin: @h*10vh @w*20vw;
                width: 100%;

                .span_tite {
                    width: @w*450vw;
                    margin: @h*20vh 0 @h*10vh;
                    float: left;
                    font-size: @h*25vh;
                    color: #fff;
                    // height: @h*50vh;


                }

                span {
                    width: @w*450vw;
                    margin-top: @h*10vh ;
                    float: left;
                    font-size: @h*20vh;
                    color: #8291A9;

                }
            }

            .button_list {
                float: left;


                margin: @h*10vh @w*20vw;

                .el-button {
                    height: @h*50vh;
                    line-height: @h*50vh;
                    margin: @h*10vh;

                    width: @w*160vw;
                    padding: 0 @w*15vw;
                }
            }

            .radio_class {
                width: 100%;
                float: left;
                height: @h*50vh;
                margin: @h*10vh 0 0 @w*20vw;

                .el-radio {
                    margin-right: @w*15vw;
                }
            }

            input {
                width: @w*400vw;
                float: left;
                height: @h*40vh;
                background-color: #161D26;
                margin: 0 0 @h*10vh @w*20vw;
                color: #fff;
                padding-left: @w*5vw;

            }
        }
    }
}
</style>
